<template>
	<view class="box-day-get">
		<slot :total="total"></slot>

		<view v-if="!hiden_title" class="title">
			<text class="text-left">每日推荐</text>
			<view @click="open_dayGetHistory" class="text-right">
				<uni-icons class="deep-color deep-size" type="calendar"></uni-icons>
				<uni-dateformat :date="Date.now()" format="M月d日" />
				<!-- <uni-icons class="deep-color deep-size" type="list"></uni-icons> -->
			</view>
		</view>

		<scroll-view @scrolltolower="scrolltolower" class="box-scroll-view-image" scroll-x>
			<view
				class="for-box-image"
				v-for="(item, index) in arr_day_img_data.value"
				:key="item.id"
			>
				<view v-if="index < limit" class="box-image" @click="fullScreenPreviewImage(index)">
					<ImageLoading :src="item.url"></ImageLoading>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { onBeforeMount, reactive, ref, defineProps } from 'vue'
import { get_day_choice } from '../../api'

const props = defineProps(['daysAgo', 'hiden_title'])
const arr_day_img_data = reactive({ value: [] })
let total = ref(0)
// 用于限制渲染
const limit = ref(4)

const api_get_day_choice = async function () {
	let res = await get_day_choice(props.daysAgo)
	arr_day_img_data.value = res.data
	total.value = res.total
}

const fullScreenPreviewImage = function (index) {
	let arg = '?index=' + index
	arg += '&daysAgo=' + props.daysAgo
	arg += '&total=' + total.value

	uni.navigateTo({
		url: '/pages/dayPreviewImage/dayPreviewImage' + arg
	})
}

onBeforeMount(() => {
	api_get_day_choice()
})

const scrolltolower = function () {
	limit.value += 2
	setTimeout(() => {
		limit.value += 1
	}, 300)
}
const open_dayGetHistory = function () {
	uni.switchTab({
		url: '/pages/dayGetHistory/dayGetHistory'
	})
}
</script>

<style scoped lang="scss">
.box-day-get {
	// position: absolute;
	margin-top: 10rpx;
	.title {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text-left {
			font-size: 32rpx;
			padding: 0 10rpx;
			color: #3e3e3e;
			font-style: italic;
			background: linear-gradient(to right, #ffb5af, #ffffff);
		}

		.text-right {
			font-size: 28rpx;
			@extend .f-c-c-n;
			color: $my-color1;
			background: radial-gradient(circle, #ffd3cf, transparent);
			// box-shadow: 0 0 20rpx #ffc2b0;
		}
	}

	.box-scroll-view-image {
		white-space: nowrap;
		height: 500rpx;

		.for-box-image {
			height: 100%;
			display: inline-block;
			overflow: hidden;
			margin: 0 10rpx;
			border-radius: 15rpx;
			.box-image {
				width: 240rpx;
				height: 100%;
			}
		}
	}
}
</style>
